// Vue 3 响应式组合式函数
import { ref, computed, onMounted, onUnmounted, readonly } from 'vue'
import {
  getCurrentBreakpoint,
  isMobile,
  isTablet,
  isDesktop,
  isLargeScreen,
  getResponsiveValue,
  responsiveValues,
  debounce
} from '@/utils/responsive-utils'

export const useBreakpoint = () => {
  const currentBreakpoint = ref<string>(getCurrentBreakpoint())
  const isMobileDevice = ref<boolean>(isMobile())
  const isTabletDevice = ref<boolean>(isTablet())
  const isDesktopDevice = ref<boolean>(isDesktop())

  const updateBreakpoint = () => {
    const newBreakpoint = getCurrentBreakpoint()
    if (newBreakpoint !== currentBreakpoint.value) {
      currentBreakpoint.value = newBreakpoint
      isMobileDevice.value = isMobile()
      isTabletDevice.value = isTablet()
      isDesktopDevice.value = isDesktop()
    }
  }

  onMounted(() => {
    window.addEventListener('resize', debounce(updateBreakpoint, 100))
  })

  onUnmounted(() => {
    window.removeEventListener('resize', debounce(updateBreakpoint, 100))
  })

  return {
    currentBreakpoint: readonly(currentBreakpoint),
    isMobileDevice: readonly(isMobileDevice),
    isTabletDevice: readonly(isTabletDevice),
    isDesktopDevice: readonly(isDesktopDevice)
  }
}

export const useResponsive = () => {
  const { currentBreakpoint, isMobileDevice, isTabletDevice, isDesktopDevice } = useBreakpoint()

  const getValue = <T>(values: Record<string, T>, defaultValue?: T): T => {
    return getResponsiveValue(values, defaultValue)
  }

  const shouldShow = (breakpoints: string[]): boolean => {
    return breakpoints.includes(currentBreakpoint.value)
  }

  const shouldHide = (breakpoints: string[]): boolean => {
    return !breakpoints.includes(currentBreakpoint.value)
  }

  const isSmallScreen = computed(() => isMobileDevice.value)
  const isMediumScreen = computed(() => isTabletDevice.value)
  const isLargeScreenComputed = computed(() => isDesktopDevice.value)

  // 响应式尺寸
  const sidebarWidth = computed(() => {
    return getValue(responsiveValues.layout.sidebar, '260px')
  })

  const headerHeight = computed(() => {
    return getValue(responsiveValues.layout.header, '64px')
  })

  const containerMaxWidth = computed(() => {
    return getValue(responsiveValues.layout.container, '1200px')
  })

  return {
    currentBreakpoint,
    isMobileDevice,
    isTabletDevice,
    isDesktopDevice,
    isSmallScreen,
    isMediumScreen,
    isLargeScreen: isLargeScreenComputed,
    getValue,
    shouldShow,
    shouldHide,
    sidebarWidth,
    headerHeight,
    containerMaxWidth
  }
}

// 专用 Hook：表格响应式
export const useTableResponsive = () => {
  const { currentBreakpoint, isMobileDevice } = useResponsive()

  const shouldUseCardView = computed(() => {
    return ['xs', 'sm'].includes(currentBreakpoint.value)
  })

  const getPaginationSize = computed(() => {
    return isMobileDevice.value ? [10, 20] : [10, 20, 50, 100]
  })

  const getTableHeight = computed(() => {
    if (isMobileDevice.value) return 'auto'
    return '600px'
  })

  return {
    shouldUseCardView,
    getPaginationSize,
    getTableHeight
  }
}

// 专用 Hook：表单响应式
export const useFormResponsive = () => {
  const { currentBreakpoint, isMobileDevice } = useResponsive()

  const labelPosition = computed(() => {
    return isMobileDevice.value ? 'top' : 'right'
  })

  const labelWidth = computed(() => {
    return isMobileDevice.value ? 'auto' : '120px'
  })

  const formSize = computed(() => {
    return isMobileDevice.value ? 'large' : 'default'
  })

  const shouldUseDrawer = computed(() => {
    return isMobileDevice.value
  })

  return {
    labelPosition,
    labelWidth,
    formSize,
    shouldUseDrawer
  }
}

// 专用 Hook：布局响应式
export const useLayoutResponsive = () => {
  const { currentBreakpoint, isMobileDevice, isDesktopDevice } = useResponsive()

  const sidebarCollapsed = ref(false)

  const mainMarginLeft = computed(() => {
    if (isMobileDevice.value) return '0px'
    if (sidebarCollapsed.value) return '64px'
    return '280px'
  })

  const containerPadding = computed(() => {
    return getValue({
      xs: '16px',
      sm: '20px',
      md: '24px',
      lg: '28px',
      xl: '32px'
    }, '24px')
  })

  const gridColumns = computed(() => {
    return getValue(responsiveValues.grid, 3)
  })

  const cardColumns = computed(() => {
    return getValue(responsiveValues.cardColumns, 3)
  })

  const toggleSidebar = () => {
    if (!isMobileDevice.value) {
      sidebarCollapsed.value = !sidebarCollapsed.value
    }
  }

  return {
    sidebarCollapsed,
    mainMarginLeft,
    containerPadding,
    gridColumns,
    cardColumns,
    toggleSidebar
  }
}